<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>人员列表</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    {CSS href="__ADDONSTATIC__css/font.css" /}
    {CSS href="__ADDONSTATIC__css/xadmin.css" /}
    {js href='__ADDONSTATIC__js/jquery-3.2.1.min.js' /}

    {js href='__ADDONSTATIC__js/xadmin.js' /}
    {js href='__ADDONSTATIC__js/util.js' /}
    {js href='__ADDONSTATIC__lib/layui/layui.js' /}
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <div class="x-body"  id="page">
      <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
          <input type="text" name="keyword" v-model="parameters.name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
          <div @click="getListPage(1)" class="layui-btn" ><i class="layui-icon">&#xe615;</i></div>
          <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon" style="line-height:30px">ဂ</i></a>
        </form>
      </div>
      <xblock>
        <button class="layui-btn" onclick="x_admin_show('添加人员','{:addonUrl('Member/memberAdd')}')"><i class="layui-icon"></i>添加</button>
        <span class="x-right" style="line-height:40px"><span>第{{pageIndex}}页 &nbsp;&nbsp; 共{{pageCount}}页 &nbsp;&nbsp; 共{{count}}条数据 </span></span>
      </xblock>
      <table class="layui-table">
        <thead>
          <tr>
            <th>序号</th>
            <th>用户名</th>
            <th>所属部门</th>
            <th>手机</th>
            <th>操作</th>
        </thead>
        <tbody>
          <tr v-for="(item,index) in pageList">
              <td>{{(pageIndex-1) * pageMaxSize + index + 1 }}</td>
              <td>{{item.name}}</td>
              <td><span v-for="part in item.parts">{{part.name}}&nbsp;</span></td>
              <td>{{item.phone}}</td>
            <td class="td-manage">
              <a title="编辑"  @click="x_admin_show('编辑','{:addonUrl('Member/memberUpdate')}?id='+item.id)" href="javascript:;">
                <i class="layui-icon">&#xe642;</i>
              </a>
              <a title="删除" @click="member_del(item.id)" href="javascript:;">
                <i class="layui-icon">&#xe640;</i>
              </a>
            </td>
          </tr>
        </tbody>
      </table>
      <!--分页页面-->
      <?php echo $pageHtml ?>
    </div>

    <script>
      var app = new Vue({
        el: '#page',
        data: {parameters:{name:""}, pageList: "", count: "", pageIndex: "1", pageSize: "", pageMaxSize:"10", pageCount: ""},
        methods:{
//          分页
          getListPage:function getListPage(pageIndex) {
            var url = "{:addonUrl('Member/pagination')}";
            var _self = this;
            if(pageIndex && pageIndex=="" && pageIndex <=0){
              pageIndex == _self.pageIndex;
            }
            ajaxUrl(url, {pageIndex: pageIndex,pageMaxSize:_self.pageMaxSize, parameters: _self.parameters}, function (data) {
              _self.pageList = data.result.pageList;
              _self.count = data.result.count;
              _self.pageIndex = data.result.pageIndex;
              _self.pageSize = data.result.pageSize;
              _self.pageCount = data.result.pageCount;
            });
          }
        }
      });
      app.getListPage(1);

      /*用户-删除*/
      function member_del(id){
          layer.confirm('确认要删除吗？',function(index){
              //发异步删除数据
            ajaxUrl('{:addonUrl('Member/deleteMember')}',{id:id},function(data){
              console.log(data);
              if(data.code == 1){
                layer.msg('已删除!',{icon:1,time:1000});
                app.getListPage();
              }else{
                layer.msg(data.message);
              }
            })
          });
      }
    </script>
  </body>

</html>